import { Button, Htag, Ptag, Tag } from '../components';
import { useEffect, useState } from 'react';
import { withLayout } from '../layout/Layout';
import { GetStaticProps } from 'next';
import axios from 'axios'
import { MenuItem } from '@/interfaces/menu.interface';

function Home({menu, firstCategory}: HomeProps): JSX.Element {
  const [counter, setCounter] = useState<number>(0)
  const [rating, setRating] = useState<number>(4)
  return (
    <>
    
      <Htag tag='h1'>Text</Htag>
      <ul>
        {menu.map(m=> {
            return (<li key={m._id.secondCategory}>
                {m._id.secondCategory}
              </li>)
            }
          )
        }
      </ul>
     
    </>
  );
}

export default withLayout(Home);

export const getStaticProps: GetStaticProps = async () => {
  const firstCategory = 0;
  const {data: menu} = await axios.post<MenuItem[]>(process.env.NEXT_PUBLIC_DOMAIN + '/api/top-page/find', {
    firstCategory
  })
  return {
    props:{
      menu,
      firstCategory
    }
  }
}

interface HomeProps extends Record<string, unknown> {
  menu: MenuItem[];
  firstCategory: number; 
}
